<template>
    <div>
        <el-row>
            <img :src="require('../../assets/yyt/img-01.jpg')">
        </el-row>
        <el-row>
            <el-steps :active="2" finish-status="success" simple style="width: 50%;margin-top:20px;margin-left:100px">
                <el-step title="1.填写号码、金额"></el-step>
                <el-step title="2.确认并支付"></el-step>

            </el-steps>
        </el-row>
        <el-row>
            <div>
                <!-- 浅绿色背景框 -->
                <el-card class="order-card"
                    style="background-color: #f0f9eb;width:65%;margin-left:100px;margin-top: 20px;">
                    <!-- 提示信息 -->
                    <div class="order-info">
                        <div style="color: green;">
                            订单已于 <span style="color: red;">{{ formattedCreateTime }}</span> 提交成功，请您尽快支付！
                        </div>
                        <div class="order-details" style="margin-top: 20px;">
                            订单号: {{ this.order.orderNum }} &nbsp;&nbsp;|&nbsp;&nbsp; 应付积分:&nbsp;
                            <div style="color: red; display: inline;">{{ this.order.integral }}</div> 
                        </div>
                    </div>
                    <!-- 充值号码 -->
                    <div style="margin-top: 20px;">
                        充值号码：<span style="color: blue;">{{ this.order.userTelephone }}</span>
                    </div>
                    <!-- 支付提示 -->
                    <div style="margin-top: 20px;">
                        请您在提交订单后<span style="color: orange;">15分钟</span>内完成确认,否则订单会自动取消。
                    </div>
       
                </el-card>
                <el-row style="margin-left: 900px;margin-top:20px">
                    <el-button type="primary" @click="pay">确认支付</el-button>
                </el-row>
            </div>
       
            <img id="qrious" />
        </el-row>
        <div v-loading="loading">
            <!-- 其他元素... -->
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            order: {

            },

            qrCode: null,

            loading: false,
            iframe: null,
            integral: '',

        }
    },
    methods: {
        pay() {

            // 开启遮罩
            this.loading = true;
            this.$axios.get("/api/zgyd-jifen/payJifen/" + this.order.orderNum).
                then(response => {
           
                    if(response.data.code==200){
                        // 发起轮询
                        this.pollingPayStatus();
                    }else{
                        alert(response.data.msg)
                    }
         
                })
                .catch(error => {
                    // 这里处理错误
                    console.log(error);
                })
                .finally(() => {
                    // 关闭遮罩
                    this.loading = false;

                });
        },
        pollingPayStatus() {
            const intervalId = setInterval(() => {
                this.$axios.get('/api/productOrder/queryOrderByOrderNum?orderNum=' + this.order.orderNum)
                    .then(response => {
                        let order = response.data.data;
                        if (order.status == 4) {
                            clearInterval(intervalId); // 停止轮询
                            this.$message.success("支付成功");
                            this.$router.push({ path: '/jifenConfirm' })
                        }
                    })
                    .catch(error => {
                        console.log(error);
                    });
            }, 1000); // 每隔5秒发送一次请求
        },

    },
    created() {

        this.order.orderNum = this.$route.query.orderNum;
        this.order.integral = this.$route.query.integral;
        this.order.userTelephone = this.$route.query.phone;

    },
    computed: {
        formattedCreateTime() {
            if (!this.order.createTime) {
                return '';
            }
            const date = new Date(this.order.createTime);
            date.setHours(date.getHours() - 8);  // 手动添加8小时
            return new Intl.DateTimeFormat('zh-CN', {
                year: 'numeric',
                month: '2-digit',
                day: '2-digit',
                hour: '2-digit',
                minute: '2-digit',
                second: '2-digit',
                hour12: false
            }).format(date).replace(/\//g, '-');
        }
    },
}
</script>

<style scoped>
.centered-text-button {
    text-align: center;
    /* 水平居中 */
    line-height: 10px;
    /* 垂直居中 */
}

.order-card {
    padding: 20px;
}

.order-info {
    display: flex;
    flex-direction: column;
}

.order-details {
    display: flex;
    align-items: center;
    margin-top: 10px;
}

.radio-content {
    display: flex;
    align-items: center;
}

.payment-img {
    position: absolute;
    top: -5px;
    /* 调整图片的垂直位置 */
    left: 0;
}

.mask {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 20px;
}
</style>